<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <div style="padding: 20px 24px 30px">
        <div class="secondaryTitle secondaryTitleTheme">工人身份</div>
        <!-- 身份信息 -->
        <!-- <el-row>
        <el-col class="identityInfoTitle titleInfo" :span="20">
          <div class="secondaryTitle secondaryTitleTheme">工人身份</div>
        </el-col>
      </el-row> -->
        <el-row class="itemInfo">
          <el-col :span="20">
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >人员姓名：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                personnelInfo.name || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >身份证号：</span
              >
              <span
                class="gridContent contentSty color666 fontSizeF"
                :title="personnelInfo.idcard"
                >{{ personnelInfo.idcard || '--' }}</span
              >
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >人员性别：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                personnelInfo.sexValue || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >家庭地址：</span
              >
              <span
                class="gridContent contentSty color666 fontSizeF rowHeight"
                :title="personnelInfo.address"
                >{{ personnelInfo.address || '--' }}</span
              >
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >出生日期：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                personnelInfo.birthday || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >人员民族：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                personnelInfo.nationalityValue || '--'
              }}</span>
            </el-col>
          </el-col>
          <el-col :span="4" style="text-align: center" class="readIdCardBox">
            <div>
              <img
                :src="employeeImgUrl ? employeeImgUrl : errorPath"
                id="cardImg"
                style="width: 100px"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="spacing"></div>
      <!-- 基础信息 -->
      <!-- <div v-if="status == 'APPROVED'"> -->
      <div style="padding: 20px 24px 30px">
        <div class="secondaryTitle secondaryTitleTheme">基础信息</div>
        <el-row>
          <el-col :span="20">
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >手机号：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                personnelInfo.tel || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >工资卡银行：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                workInfo.bankName || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >工资卡号：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                workInfo.tel || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >政治面貌：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                personnelInfo.bankName || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >婚姻状况：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                personnelInfo.tel || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >文化程度：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                personnelInfo.bankName || '--'
              }}</span>
            </el-col>
          </el-col>
        </el-row>
      </div>
      <div class="spacing"></div>
      <div style="padding: 20px 24px 30px">
        <!-- 合同信息 -->
        <div class="secondaryTitle secondaryTitleTheme">合同信息</div>
        <el-row>
          <el-col :span="20">
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >项目名称：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                workInfo.projectName || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >选择参建单位：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                workInfo.companyName || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >人员类型：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                workInfo.typeName || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >选择班组：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                workInfo.groupName || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >工种：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                workInfo.workTypeName || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >雇佣时间：</span
              >
              <span class="gridContent contentSty color666 fontSizeF"
                >{{ workInfo.startDate || '--' }}&nbsp;&nbsp;至&nbsp;&nbsp;{{
                  workInfo.endDate || '--'
                }}</span
              >
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >考勤卡号：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                workInfo.attNo || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >计量单位：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                workInfo.unitName || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >计量单价：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                workInfo.price || '0'
              }}</span>
            </el-col>
            <el-col :span="20" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >合同附件：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">
                <span v-if="upLoadFile.length > 0">
                  <span>已上传</span>
                  <el-link class="seeFile" @click="toUploadFile()"
                    >查看</el-link
                  >
                  <contractEnclosureDialog
                    v-if="uploadContract"
                    dialogTitle="项目合同附件"
                    :tableData="upLoadFile"
                    @closeDialog="hiddenDialog"
                  ></contractEnclosureDialog>
                </span>
                <span v-else>未上传</span>
              </span>
            </el-col>
          </el-col>
        </el-row>
      </div>
      <div class="spacing" v-if="status == 'REJECT'"></div>
      <div v-if="status == 'REJECT'" style="padding: 20px 24px 30px">
        <div class="secondaryTitle secondaryTitleTheme">拒绝信息</div>
        <el-row>
          <el-col :span="20">
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >拒绝人：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                rejectInfo.operator || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >拒绝时间：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                rejectInfo.operatDate || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >拒绝原因：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                rejectInfo.reason || '--'
              }}</span>
            </el-col>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import contractEnclosure from '@/components/publicCom/contractEnclosure'

export default {
  name: 'projectSeeDetail',
  components: {
    contractEnclosure,
  },
  data() {
    return {
      titleText: '',
      workInfo: {},
      personnelInfo: {},
      employeeId: '',
      projectId: '',
      employeeImgUrl: '',
      errorPath: require('../../../static/img/employee/card.png'),
      back: true,
      status: '',
      rejectInfo: '',
      id: '',
      upLoadFile: [],
      //   srcList: [],
      //   oldSrcList: [],
      uploadImg: [],
      uploadContract: false, //合同附件
    }
  },
  watch: {},
  created() {
    this.employeeId = this.$route.query.employeeId
    this.projectId = this.$route.query.projectId
    this.status = this.$route.query.status
    this.id = this.$route.query.id
    if (this.status == 'REJECT') {
      this.titleText = '申请拒绝详情'
      this.getRejectInfo()
    } else {
      this.titleText = '申请人员信息详情'
      this.getWorkInfo()
    }
    this.getIdentityInfo()
  },
  mounted() {},
  methods: {
    goBack() {
      this.$router.push('/home/employee/projectEmployeeApply')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/employee/projectEmployeeApply',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 获取身份信息
    getIdentityInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/build/expand/detail',
        data: {
          employeeId: this.employeeId,
        },
      })
        .then(
          (resp) => {
            if (!resp.data.hasError) {
              this.personnelInfo = resp.data.result
              this.employeeImgUrl = this.personnelInfo.idcardPhoto
            } else {
              this.$message({
                type: 'error',
                message: resp.data.errorMsg,
              })
            }
          },
          (res) => {}
        )
        .catch((error) => {})
    },
    getWorkInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/contract/expand/contractdetail',
        data: {
          employeeId: this.employeeId,
          projectId: this.projectId,
        },
      })
        .then(
          (resp) => {
            if (!resp.data.hasError) {
              this.workInfo = resp.data.result
              this.upLoadFile = this.workInfo.fileExpandVOs
              //   for (var i = 0; i < this.upLoadFile.length; i++) {
              //     this.srcList.push(this.upLoadFile[i]);
              //     this.oldSrcList.push(this.upLoadFile[i]);
              //   }
            } else {
              this.$message({
                type: 'error',
                message: resp.data.errorMsg,
              })
            }
          },
          (res) => {}
        )
        .catch((error) => {})
    },
    getRejectInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/application/expend/detail',
        data: {
          id: this.id,
        },
      })
        .then(
          (resp) => {
            if (!resp.data.hasError) {
              this.rejectInfo = resp.data.result
            } else {
              this.$message({
                type: 'error',
                message: resp.data.errorMsg,
              })
            }
          },
          (res) => {}
        )
        .catch((error) => {})
    },
    toUploadFile() {
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .topTitle {
    padding: 0;
  }
  .mainCon {
    padding: 0 !important;
    padding-bottom: 24px !important;
  }
  .editBut {
    position: absolute;
    top: 86px;
    right: 40px;
    height: 32px;
    width: 70px;
    border: 0;
  }
  .labelWidth {
    font-size: 14px;
    color: #666666;
    display: inline-block;
    height: 36px;
    float: left;
  }
  .information {
    font-size: 14px;
    color: #151515;
    display: block;
    width: 98%;
  }
  .operateButton {
    height: 80px;
    line-height: 100px;
    .editBut {
      padding: 10px;
      background: #009588;
    }
  }
  .titleInfo {
    // height: 60px;
    // font: 18px/60px Microsoft YaHei;
    // border-bottom: 1px solid #dee5f4;
  }
  .identityInfo,
  .basicInfo,
  .contractInfo {
    // padding: 18px 0 5px 0;
  }
  .identityInfoTitle {
    color: #009588;
  }
  .basicInfoTitle {
    color: #67ace4;
  }
  .contractInfoTitle {
    color: #f9a243;
  }
  .readIdCardBox {
    img {
      width: 100px;
      margin-bottom: 6px;
    }
    .onState {
      padding: 2px 10px;
      font-size: 14px;
      border-radius: 4px;
      color: #009588;
      border: 1px solid #009588;
      background: rgba(0, 149, 136, 0.1);
    }
    .outState {
      padding: 2px 10px;
      font-size: 14px;
      border-radius: 4px;
      color: #bfc5cc;
      border: 1px solid #bfc5cc;
      background: rgba(191, 197, 204, 0.09);
    }
  }
  .imgStyle {
    margin-left: 16px;
    li {
      position: relative;
      margin-right: 20px;
      margin-top: 10px;
      i {
        position: absolute;
        right: -6px;
        top: -10px;
        font-size: 20px;
      }
    }
  }
  .el-link.el-link--primary {
    vertical-align: top;
  }
}
.dialogTitle p {
  color: #333;
  font-size: 18px;
  line-height: 24px;
  span {
    font-size: 14px;
    color: #999;
    line-height: 24px;
  }
}

.box {
  padding: 20px 24px 30px;
}

.item {
  margin-top: 26px;
}
</style>
